সিএসএসের মাধ্যমে একটি এলিমেন্টকে ডানে, বামে এবং মাঝে শ্রেনীবিন্যাস বা সাজানো যায়। যেমনটি এই এলিমেন্টটিকে মাঝে শ্রেনীবিন্যাস করা হয়েছে।

এলিমেন্টকে মধ্যখানে এলাইন

margin: auto; ব্যবহার করে আপনি কোন এলিমেন্টকে অনুভূমিকভাবে কেন্দ্রে আনতে পারবেন। কন্টেন্টের জন্য আপনাকে নির্দিষ্ট প্রস্থ(widht) সেট করে দিতে হবে। আর কন্টেন্টের প্রস্থ ব্যতীত অবশিষ্ট প্রস্থটি দুই মার্জিনের মধ্যে সমানভাবে বিভক্ত হবে। এতে করে আপনার কন্টেন্টটি সর্বদাই মধ্যখানে অবস্থান করবেঃ

kt_satt_skill_example_id=828

বিঃদ্রঃ যেই এলিমেন্টের জন্য width প্রোপার্টি সেট করা হয়নি অথবা width প্রোপার্টির ভ্যালু 100% সেট করা হয়েছে, সেই সকল এলিমেন্টে margin: auto; কোন প্রভাবে ফেলবে না। এই বিষয়টি গুরুত্ব সহকারে মনে রাখতে হবে।

টেক্সট মাঝে এলাইন

কোন একটি এলিমেন্টের অন্তর্গত টেক্সটকে মাঝে এলাইন করার জন্য text-align: center; প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=829

পরামর্শঃ টেক্সট এলাইন সম্পর্কে আরো জানতে আমাদের সিএসএস টেক্সট অধ্যায়টি দেখুন।

ছবিকে মাঝে এলাইন

img এলিমেন্টের মধ্যে margin: auto; এবং display: block; একত্রে ব্যবহার করে আমরা একটি ইমেজকে মাঝখানে আনতে পারবোঃ

kt_satt_skill_example_id=832

এলিমেন্টকে ডানে এবং বামে এলাইন

এলাইনের আরো একটি উপায় রয়েছে। position: absolute; ব্যবহার করে আমরা একটি এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারিঃ

kt_satt_skill_example_id=834

পরামর্শঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য position প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের সাথে position প্রোপার্টি ব্যবহার করতে সমস্যা হয়। এখন যদি আমরা একটি container এলিমেন্ট ব্যবহার করি যার প্রস্থ নির্দিষ্ট করা আছে এবং যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের

kt_satt_skill_example_id=837

উপরের উদাহরনের লক্ষ্য করুন, ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে position প্রোপার্টি ব্যবহার করতে সমস্যা হয় তাই সম্পুর্ন বডির মার্জিন এবং প্যাডিং শূন্য করে দিয়ে একটি container এলিমেন্ট width নির্দিষ্ট করে দেওয়া হয়েছে। ফলে ইন্টারনেট এক্সপ্লোরারে এ সমস্যা আর হবে না।

বামে এবং ডানে এলাইন - float প্রোপার্টির ব্যবহার

আমরা float প্রোপার্টি ব্যবহার করেও এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারি।

বিঃদ্রঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য float প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই < body> এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের ক্ষেত্রে float প্রোপার্টি ব্যবহারে সমস্যা রয়েছে। যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের জন্য নির্দিষ্ট করা থাকে। তাই সবসময় float ব্যবহার করার আগে !DOCTYPE ঘোষণা করতে হবে।

kt_satt_skill_example_id=839